// webpack 配置
const path = require("path");
const HtmlWebPackPlugin = require("html-webpack-plugin");
// const ExtractTextPlugin = require("extract-text-webpack-plugin"); // webpack v4.0版本已经弃用，改用 mini-css-extract-plugin
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    entry: './src/index.js', // webpack入口配置，js执行入口文件是index.js
    output: { // webpack出口，将所有依赖的模块合并输出到一个boundle.js文件中
        filename: "boundle.js",
        path: path.resolve(__dirname, './dist') // 将输出文件都放到 dist 目录下面
    },
    module: {
        rules: [
            {
                // 用正则表达式去匹配要用该 Loader 转换的js 或者 jsx文件
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                // 用正则表达式去匹配要用该 Loader 转换的html文件
                test: /\.html$/,
                use: [
                    {
                        loader: "html-loader"
                    }
                ]
            },
            {
                // 用正则表达式去匹配要用该 Loader 转换的css文件
                test: /\.css$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            // you can specify a publicPath here
                            // by default it use publicPath in webpackOptions.output
                            publicPath: './dist/'
                        }
                    },
                    "css-loader"
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: "./index.html",
            filename: "./html/index.html"
        }),
        new MiniCssExtractPlugin({
            // 参数类似于 output 中的参数
            // 这两个选项都是可选的
            filename: "[name].css",
            chunkFilename: "[id].css"
        })
    ],
    /*devServer: {
        contentBase: path.join(__dirname, './src/index.html')
    }*/
};